<template>
  <div id="grzl">
    <h3>个人资料</h3>
    <ul v-for="(item, index) in orderHistory" :key="index" class="gmgs">
      <li>
        <div class="gz-left">
          <img :src="item.src" alt="" />
          <p>{{ item.name }}</p>
        </div>
        <div class="gz-right">
          <div><span>商品评分</span> <van-rate v-model="item.pf" /></div>
          <div>
            <span class="pjsp" @click="tjpj">评价商品</span>
            <textarea
              name=""
              id=""
              cols="20"
              rows="10"
              v-model="item.pj"
              placeholder="商品评价，最少10个字，最多50个字"
            ></textarea>
          </div>
          <div>
            <span>晒图片</span>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </li>
    </ul>
    <div class="tjpj">
      <span>提交评价</span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'grzl',
  data() {
    return {};
  },
  computed: {
    ...mapState(['orderHistory']),
  },
  methods: {
    tjpj() {},
  },
};
</script>

<style scoped>
#grzl h3 {
  margin-left: 20px;
  margin-top: 20px;
  font-weight: normal;
}
.gmgs {
  width: 100%;
}
.gmgs li {
  margin-top: 15px;
  display: flex;
  height: 280px;
  width: 100%;
}
.gz-left {
  width: 40%;
  margin-left: 23px;
}
.gz-left img {
  width: 224px;
  height: 224px;
  padding: 10px;
  border: 1px solid #e1e1e1;
}
.gz-left p {
  color: #666;
  font-size: 16px;
  margin-top: 10px;
}
.gz-right {
  display: flex;
  flex-direction: column;
}
.gz-right > div {
  margin-top: 20px;
}
.gz-right span {
  font-size: 16px;
  color: #666;
  margin-right: 20px;
  vertical-align: top;
}
textarea {
  width: 350px;
  height: 100px;
  resize: none;
  border: 1px solid #e1e1e1;
  color: #666;
}
.pjsp {
  vertical-align: top;
}

.gz-right i {
  display: inline-block;
  width: 58px;
  height: 58px;
  background: url('./images/pub/tj.png');
  margin-right: 10px;
  vertical-align: bottom;
}
.gz-right i:nth-of-type(1) {
  margin-left: 16px;
}
.tjpj {
  width: 100%;
  text-align: center;
}
.tjpj span {
  display: inline-block;
  width: 152px;
  height: 52px;
  background-color: #f08200;
  line-height: 52px;
  color: #fff;
  border-radius: 5px;
}
</style>
